<template lang="pug">
.view.cp-inv-setting
  .sg-unit-wrap
    el-table(
      :data="units",
      height="100%"
      size="mini"
      :row-class-name="tableRowClassName")
      el-table-column(align="center", show-overflow-tooltip, prop="name", label="配置类别")
        template(slot-scope="scope")
          el-input(v-model="scope.row.name", v-show="scope.row.isEdit")
          span.wp-click-cell(v-text="scope.row.name", v-show="!scope.row.isEdit", @click="clickUnit(scope.row)")
      el-table-column(align="center", label="操作", width="80px")
        template(slot-scope="scope")
          el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editUnit(scope.$index)")
            i.icon-act.el-icon-edit
          el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deleteUnit(scope.row, scope.$index)")
            i.icon-act.el-icon-delete
          el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertUnit(scope.row, scope.$index)")
            i.icon-act.el-icon-check
          el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="cancleUnit(scope.$index)")
            i.icon-act.el-icon-close
      .append-content(slot="append")
        el-button(type="primary", style="width: 80px;", @click="addUnit", size="mini") 新增一行
  .sg-config-wrap
    el-table(
      :data="configs",
      highlight-current-row
      height="100%"
      size="mini"
      v-loading="loadingUnitDetail")
      el-table-column(align="center", show-overflow-tooltip, prop="value", label="值")
        template(slot-scope="scope")
          el-input(v-model="scope.row.value", v-show="scope.row.isEdit")
          span(v-text="scope.row.value", v-show="!scope.row.isEdit")
      el-table-column(align="center", show-overflow-tooltip, prop="status", label="状态")
        template(slot-scope="scope")
          el-select(v-model="scope.row.status", v-show="scope.row.isEdit")
            el-option(label="禁用", :value="0")
            el-option(label="启用", :value="1")
          span(v-text="scope.row.status ? '启用' : '禁用'", v-show="!scope.row.isEdit")
      el-table-column(align="center", label="操作", width="80px")
        template(slot-scope="scope")
          el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editConfig(scope.$index)")
            i.icon-act.el-icon-edit
          el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deleteConfig(scope.row, scope.$index)")
            i.icon-act.el-icon-delete
          el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertConfig(scope.row, scope.$index)")
            i.icon-act.el-icon-check
          el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="cancleConfig(scope.$index)")
            i.icon-act.el-icon-close
      .append-content(slot="append")
        el-button(type="primary", style="width: 80px;", @click="addConfig", size="mini") 新增一行
  //- .sg-btns-wrap
  //-   el-button.c-wp-btn(type="primary", icon="el-icon-plus") 新增
  //-   el-button.c-wp-btn(type="primary", icon="el-icon-delete") 删除
  //-   el-button.c-wp-btn(type="primary", icon="el-icon-edit") 编辑
  //-   el-button.c-wp-btn(type="primary", icon="el-icon-arrow-up") 上移
  //-   el-button.c-wp-btn(type="primary", icon="el-icon-arrow-down") 下移
</template>

<script>
const SetApi = {};

export default {
  name: 'setting',
  data() {
    return {
      units: [],
      unitsBC: [],
      configs: [],
      configsBC: [],
      highLightId: null,
      loadingUnitDetail: false
    };
  },
  methods: {
    clickUnit (row) {
      if (row.id) {
        this.highLightId = row.id;
        this.loadingUnitDetail = true;
        SetApi.getUnitDetail({ id: row.id }).then((unitDetail) => {
          this.configs = unitDetail;
          this.loadingUnitDetail = false;
        }).catch((error) => {
          console.log(JSON.stringify(error));
        });
      }
    },
    tableRowClassName({ row }) {
      if (row.id === this.highLightId) {
        return 'hignlight-row';
      }
      return '';
    },
    addUnit () {
      if (!this.units) {
        this.$set(this, 'units', [{ isEdit: true }]);
      } else {
        this.units.push({ isEdit: true });
      }
    },
    editUnit (index) {
      this.unitsBC[index] = Object.assign({}, this.units[index]);
      this.$set(this.units[index], 'isEdit', true);
    },
    deleteUnit (row, index) {
      // 切换焦点
      if (this.highLightId === row.id) {
        let transfer = this.units[index + 1];
        if (!transfer) {
          transfer = this.units[0];
        }
        this.clickUnit(transfer);
      }
      // 删除unit
      if (row.id) {
        SetApi.deleteUnit({ id: row.id }).then((result) => {
          if (!result.status) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            this.$message.error('删除失败');
          }
        }).catch((error) => {
          console.log(JSON.stringify(error));
        });
      }
      this.units.splice(index, 1);
      this.unitsBC[index] = null;
    },
    insertUnit (row, index) {
      const params = {
        id: row.id,
        name: row.name,
        value: row.value
      };
      console.log(params);
      SetApi.saveUnit(params).then((result) => {
        if (!result.status) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          if (!params.id) {
            // 新增unit逻辑
            this.units[index].id = result.id;
            this.units[index].name = result.name;
            this.units[index].value = result.value;
          }
          this.units[index].isEdit = false;
        } else {
          this.$message.error('保存失败');
        }
      }).catch((error) => {
        console.log(JSON.stringify(error));
      });
    },
    cancleUnit (index) {
      if (this.unitsBC[index]) {
        this.$set(this.units, `${index}`, this.unitsBC[index]);
      } else {
        this.deleteUnit({}, index);
      }
    },
    addConfig () {
      if (!this.configs) {
        this.$set(this, 'configs', [{ isEdit: true }]);
      } else {
        this.configs.push({ isEdit: true });
      }
    },
    editConfig (index) {
      this.configsBC[index] = Object.assign({}, this.configs[index]);
      this.$set(this.configs[index], 'isEdit', true);
    },
    deleteConfig (row, index) {
      if (row.id) {
        const params = {
          unitId: this.highLightId,
          configId: row.id
        };
        SetApi.deleteConfig(params).then((result) => {
          if (!result.status) {
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          } else {
            this.$message.error('删除失败');
          }
        }).catch((error) => {
          console.log(JSON.stringify(error));
        });
      }
      this.configs.splice(index, 1);
      this.configsBC[index] = null;
    },
    insertConfig (row, index) {
      const params = {
        unitId: this.highLightId,
        configId: row.id,
        value: row.value,
        status: row.status,
      };
      SetApi.saveConfig(params).then((result) => {
        if (!result.status) {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
          if (!params.configId) {
            // 新增unit逻辑
            this.configs[index].id = result.id;
            this.configs[index].value = result.value;
            this.configs[index].status = result.status;
          }
          this.configs[index].isEdit = false;
        } else {
          this.$message.error('保存失败');
        }
      }).catch((error) => {
        console.log(JSON.stringify(error));
      });
    },
    cancleConfig (index) {
      if (this.configsBC[index]) {
        this.$set(this.configs, `${index}`, this.configsBC[index]);
      } else {
        this.deleteConfig({}, index);
      }
    }
  },
  created () {
    SetApi.getUnitList().then((unitArr) => {
      this.units = unitArr;
      const id = unitArr[0].id;
      this.highLightId = id;
      this.loadingUnitDetail = true;
      SetApi.getUnitDetail({ id }).then((unitDetail) => {
        this.configs = unitDetail;
        this.loadingUnitDetail = false;
      });
    }).catch((error) => {
      console.log(JSON.stringify(error));
    });
  },
  mounted () {
  }
};
</script>

<style lang="sass">
@import "../../styles/utils"
.cp-inv-setting
  width: 100%
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .sg-unit-wrap
    position: absolute
    left: 16px
    width: 240px
    top: 12px
    bottom: 12px
    overflow: auto
    .wp-click-cell
      display: inline-block
      width: 100%
      height: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .hignlight-row
      background: #f5f7fa
    .el-table__empty-block
      display: none
    .append-content
      text-align: center
      margin: 12px auto
  .sg-config-wrap
    position: absolute
    top: 12px
    bottom: 12px
    left: 268px
    width: 360px
    overflow: auto
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
    .append-content
      text-align: center
      margin: 12px auto
  .sg-btns-wrap
    position: absolute
    top: 24px
    bottom: 32px
    left: 520px
    width: 120px
    overflow: auto
    .c-wp-btn
      display: block
      margin: 15px auto
</style>
